<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Color 色彩</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.color-div{
	width: 340px;
	height: 112px;
	display: inline-block;
	margin-right: 14px;
	margin-top: 10px;
}
.top{
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	height: 34px;
	/* background-color: #409EFF; */
	padding: 18px;
}
.border-radius{
	border-radius: 6px;
	width: 220px;
	height: 80px;
	padding: 18px;
}
.bottom{
	flex: 1;
	display: flex;
	height: 42px;
}
.cell{
	width: 60px;
	height: 100%;
}
.w_desc{
	color: white;
	font-size: 14px;
}
.b_desc{
	color: black;
	font-size: 14px;
}
html{
	--diy-success-bg-color: #67C23A;
	--diy-warning-bg-color: #E6A23C;
	--diy-danger-bg-color: #F56C6C;
	--diy-info-bg-color: #909399;
	/* --diy-info-bg-color: #FF0000; */
}
.bg-transparent{
	background-size: 20px 20px;
	background-position: 0px 0px,10px 0px,10px -10px,0px 10px;
	background-image: linear-gradient(45deg,#f4f4f5 25%,rgba(255,0,0,0) 25%),linear-gradient(135deg,#f4f4f5 25%,rgba(0,0,0,0) 25%),linear-gradient(45deg,rgba(0,0,0,0) 75%,#f4f4f5 75%),linear-gradient(135deg,rgba(0,0,0,0) 75%,#f4f4f5 75%);
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">主色</el-divider><!-- =============================================================== -->
	<div class="color-div">
		<div class="top" style="background-color: #409EFF;">
			<span class="w_desc">Brand Color</span><br />
			<span class="w_desc">#409EFF</span>
		</div>
		<div class="bottom">
			<div class="cell" style="background-color: var(--el-color-primary-dark-2);"></div>
			<div class="cell" style="background-color: var(--el-color-primary-light-3)"></div>
			<div class="cell" style="background-color: var(--el-color-primary-light-5);"></div>
			<div class="cell" style="background-color: var(--el-color-primary-light-7);"></div>
			<div class="cell" style="background-color: var(--el-color-primary-light-8);"></div>
			<div class="cell" style="background-color: var(--el-color-primary-light-9);"></div>
		</div>
	</div>
	
	<el-divider content-position="left">辅助色</el-divider><!-- =============================================================== -->
	<div class="color-div">
		<div class="top" style="background-color: var(--diy-success-bg-color);">
			<span class="w_desc">Success</span><br />
			<span class="w_desc">#67C23A</span>
		</div>
		<div class="bottom">
			<div class="cell" style="background-color: var(--el-color-success-dark-2);"></div>
			<div class="cell" style="background-color: var(--el-color-success-light-3)"></div>
			<div class="cell" style="background-color: var(--el-color-success-light-5);"></div>
			<div class="cell" style="background-color: var(--el-color-success-light-7);"></div>
			<div class="cell" style="background-color: var(--el-color-success-light-8);"></div>
			<div class="cell" style="background-color: var(--el-color-success-light-9);"></div>
		</div>
	</div>
	
	<div class="color-div">
		<div class="top" style="background-color: var(--diy-warning-bg-color);">
			<span class="w_desc">Warning</span><br />
			<span class="w_desc">#E6A23C</span>
		</div>
		<div class="bottom">
			<div class="cell" style="background-color: var(--el-color-warning-dark-2);"></div>
			<div class="cell" style="background-color: var(--el-color-warning-light-3)"></div>
			<div class="cell" style="background-color: var(--el-color-warning-light-5);"></div>
			<div class="cell" style="background-color: var(--el-color-warning-light-7);"></div>
			<div class="cell" style="background-color: var(--el-color-warning-light-8);"></div>
			<div class="cell" style="background-color: var(--el-color-warning-light-9);"></div>
		</div>
	</div>
	
	<div class="color-div">
		<div class="top" style="background-color: var(--diy-danger-bg-color);">
			<span class="w_desc">Danger</span><br />
			<span class="w_desc">#F56C6C</span>
		</div>
		<div class="bottom">
			<div class="cell" style="background-color: var(--el-color-danger-dark-2);"></div>
			<div class="cell" style="background-color: var(--el-color-danger-light-3)"></div>
			<div class="cell" style="background-color: var(--el-color-danger-light-5);"></div>
			<div class="cell" style="background-color: var(--el-color-danger-light-7);"></div>
			<div class="cell" style="background-color: var(--el-color-danger-light-8);"></div>
			<div class="cell" style="background-color: var(--el-color-danger-light-9);"></div>
		</div>
	</div>
	
	<div class="color-div">
		<div class="top" style="background-color: var(--diy-info-bg-color);">
			<span class="w_desc">Info</span><br />
			<span class="w_desc">#909399</span>
		</div>
		<div class="bottom">
			<div class="cell" style="background-color: var(--el-color-info-dark-2);"></div>
			<div class="cell" style="background-color: var(--el-color-info-light-3)"></div>
			<div class="cell" style="background-color: var(--el-color-info-light-5);"></div>
			<div class="cell" style="background-color: var(--el-color-info-light-7);"></div>
			<div class="cell" style="background-color: var(--el-color-info-light-8);"></div>
			<div class="cell" style="background-color: var(--el-color-info-light-9);"></div>
		</div>
	</div>
	
	<el-divider content-position="left">中性色</el-divider><!-- =============================================================== -->
	<p class="desc">中性色用于文本、背景和边框颜色。 通过运用不同的中性色，来表现层次结构。</p>
	<div class="color-div border-radius" style="background-color: #303133;">
		<span class="w_desc">Primary Text</span> <br /> <span class="w_desc">#303133</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #CDD0D6;">
		<span class="b_desc">Darker Border</span> <br /> <span class="b_desc">#CDD0D6</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #E6E8EB;">
		<span class="b_desc">Darker Fill</span> <br /> <span class="b_desc">#E6E8EB</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #000000;">
		<span class="b_desc">Basic Black</span> <br /> <span class="b_desc">#000000</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #606266;">
		<span class="w_desc">Regular Text</span> <br /> <span class="w_desc">#606266</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #D4D7DE;">
		<span class="b_desc">Dark Border</span> <br /> <span class="b_desc">#D4D7DE</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #EBEDF0;">
		<span class="b_desc">Dark Fill</span> <br /> <span class="b_desc">#EBEDF0</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #FFFFFF;">
		<span class="b_desc">Basic White</span> <br /> <span class="b_desc">#FFFFFF</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #303133;">
		<span class="w_desc">Secondary Text</span> <br /> <span class="w_desc">#303133</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #DCDFE6;">
		<span class="b_desc">Base Border</span> <br /> <span class="b_desc">#DCDFE6</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #F0F2F5;">
		<span class="b_desc">Base Fill</span> <br /> <span class="b_desc">#F0F2F5</span>
	</div>
	
	<div class="color-div border-radius bg-transparent" style="">
		<span class="b_desc">Transparent</span> <br /> <span class="b_desc">transparent</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #A8ABB2;">
		<span class="w_desc">Placeholder Text</span> <br /> <span class="w_desc">#A8ABB2</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #E4E7ED;">
		<span class="b_desc">Light Border</span> <br /> <span class="b_desc">#E4E7ED</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #F5F7FA;">
		<span class="b_desc">Light Fill</span> <br /> <span class="b_desc">#F5F7FA</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #F2F3F5;">
		<span class="b_desc">Page Background</span> <br /> <span class="b_desc">#F2F3F5</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #C0C4CC;">
		<span class="w_desc">Disabled Text</span> <br /> <span class="w_desc">#C0C4CC</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #EBEEF5;">
		<span class="b_desc">Lighter Border</span> <br /> <span class="b_desc">#EBEEF5</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #FAFAFA;">
		<span class="b_desc">Lighter Fill</span> <br /> <span class="b_desc">#FAFAFA</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #F2F6FC;">
		<span class="b_desc">Extra-light Border</span> <br /> <span class="b_desc">#F2F6FC</span>
	</div>
	
	<div class="color-div border-radius" style="background-color: #FAFCFF;">
		<span class="b_desc">Extra-light Fill</span> <br /> <span class="b_desc">#FAFCFF</span>
	</div>

</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>